<template>
  <VGroup class="w-[208px]">
    <el-input-number v-model="lengthVal" :min="0" :controls="false" :disabled="disabled"/>
    <el-input-number v-model="widthVal" :min="0" :controls="false" :disabled="disabled"/>
    <el-input-number v-model="heightVal" :min="0" :controls="false" :disabled="disabled"/>
    <div
      class="text-[14px] text-[var(--base-text-color)] leading-[20px] bg-[var(--base-small-bg-color)] whitespace-nowrap flex items-center px-[5px] rounded-tr-[4px] rounded-br-[4px] border border-[var(--base-border-color)]"
    >
      cm
    </div>
  </VGroup>
</template>

<script setup>
const lengthVal = ref()
const widthVal = ref()
const heightVal = ref()

const props = defineProps({
  value: { type: [Array], default: () => [] },
  disabled:{type:Boolean,default:false}
})

const emit = defineEmits(['input'])

watch(
  () => [lengthVal.value, widthVal.value, heightVal.value],
  val => {
    const [_length = '', _width = '', _height = ''] = val || []
    emit('input', [_length, _width, _height])
  }
)

watch(
  () => props.value,
  val => {
    if (!val) return
    const [_length = null, _width = null, _height = null] = val || []
    lengthVal.value = _length
    widthVal.value = _width
    heightVal.value = _height
  }
)
</script>
